<template>
  <div>
    <el-form @submit.native.prevent class="query-table-form" :inline="true" :model="params">
      <el-form-item>
        <el-input
          v-model="params.customer_name"
          placeholder="担保客户查询"
          clearable
          @change="getData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="getData()">查询</el-button>
      </el-form-item>
    </el-form>

    <c-table
      border
      v-loading="loading"
      class="table-sm"
      :columns="tableColumns"
      :data="tableData"
    ></c-table>

    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="tableCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <el-dialog
      :visible.sync="viewVisible"
      :close-on-click-modal="false"
      append-to-body
      top="30px"
      width="1000px"
      title="查看"
      class="dialog-sm"
    >
      <el-tabs>
        <el-tab-pane label="放款通知书">
          <pdf-view down-name="放款通知书" :contract-id="viewNoticeId" view-mode></pdf-view>
        </el-tab-pane>
        <el-tab-pane label="放款登记">
          <register-reply :query-id="viewRegisterId" view-mode></register-reply>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import RegisterReply from '@/bank/views/fast/register/components/RegisterReply'
import PdfView from '@/credit/views/county/unionProvince/components/PdfView'
import { mapGetters } from 'vuex'
export default {
  components: {
    RegisterReply,
    PdfView,
  },
  data() {
    return {
      loading: false,
      params: {
        index: 1,
        size: 10,
        'loan_register_status.eq': 2,
      },
      order: {
        create_time: 'desc',
      },
      // tableName: 'customer_related_quick',
      tableName: 'customer_related_quick_batch_confirm_view',
      tableCount: 0,
      tableData: [],
      tableColumns: [
        { attrs: { label: '借款人', prop: 'customer_name', width: 100 } },
        { attrs: { label: '组织类型', prop: 'org_class_name' } },
        { attrs: { label: '负责人姓名', prop: 'corp_name' } },
        { attrs: { label: '授信金额', prop: 'apply_funds' } },
        { attrs: { label: '本次支用金额', prop: 'cur_use_funds' } },
        { attrs: { label: '支用期限（月）', prop: 'months' } },
        { attrs: { label: '贷款利率（年）', prop: 'load_rate' } },
        { attrs: { label: '担保费率', prop: 'gua_rate' } },
        { attrs: { label: '保费金额(元)', prop: 'gua_fee' } },
        { attrs: { label: '贷款银行', prop: 'bank_name', width: 110 } },
        { attrs: { label: '贷款开始时间', prop: 'load_date', width: 100 } },
        { attrs: { label: '贷款结束时间', prop: 'load_end_date', width: 100 } },
        {
          attrs: { label: '操作', align: 'center', width: 130 },
          operations: [
            {
              content: '查看',
              icon: 'fa fa-search',
              event: this.handleView,
              attrs: { class: 'p-0 m-2' },
            },
          ],
        },
      ],

      // 放款通知书
      viewVisible: false,
      viewNoticeId: '',
      viewRegisterId: '',
    }
  },

  created() {
    this.params['service_id.eq'] = this.clientId
    this.getData()
  },
  computed: {
    ...mapGetters(['clientId']),
  },
  methods: {
    getData(index = 1) {
      this.loading = true
      this.params.index = index
      this.$api
        .getData({
          table: this.tableName,
          params: this.params,
          order: this.order,
        })
        .then(res => {
          const data = res?.data ?? {}
          this.tableData = (data.data || []).map(this.dataAdapter)
          this.totalCount = data.totalCount || 0
        })
        .finally(() => {
          this.loading = false
        })
    },

    dataAdapter(item) {
      item.createTime = this.$utils.dateFormat(item.create_time, 'yyyy-MM-dd hh:mm')
      item.customerNo = +item.customer_type === 1 ? item.register_no : item.lender_idcard
      return item
    },

    handleView(row = {}) {
      this.viewNoticeId = row.doc_id
      this.viewRegisterId = row.customer_related_id
      this.viewVisible = true
    },
  },
}
</script>
<style lang="scss" scoped></style>
